<template>
    <!-- html结构 -->
    <div class="person">
        <h1>中国</h1>
        <h2 ref="title2">北京</h2>
        <h3>尚硅谷</h3>
        <button @click="showLog">点击输出h2标签</button>
    </div>
</template>
<script setup lang="ts" name="Person">
import { ref,defineExpose } from 'vue'
// 创建一个title2，用于存储ref标记的内容
let title2 = ref()
// ref作用：用于注册模板引用。
// 用在普通DOM标签上，获取的是DOM节点。
// 用在组件标签上，获取的是组件实例对象
let a=ref(0)
let b=ref(1)
let c=ref(2)

function showLog() {
    // 如果前面组件也有id="title2"，则返回第一个，别人先用了，故要用ref
    // console.log(document.getElementById('title2'))
    // 创建一个title2，用于存储ref标记的内容
    
    console.log(title2.value);
    
// <h2 data-v-4cadc14e>北京</h2> data-v-4cadc14e是局部样式，因为style里面有scoped（局部样式必加）,将样式绑定在当前vue文件里，否则会影响其他vue文件
    
}
// 子组件主动数据暴露给父组件
defineExpose({a,b,c})
</script>

<style scoped>
.person {
    background-color: #6cf;
    box-shadow: 0 0 10px #000;
    border-radius: 10px;
    padding: 10px;
}
</style>